import { ConnectProps, ConnectState } from '@/models/connect';
import ProjectUtil from '@/utils/ProjectUtil';
import { Tag } from 'antd';
import { connect } from 'dva';
import React from 'react';
import customSettings from '../../../config/customSettings';
// import SoftPhone from '../../pages/crm/components/SoftPhone';
import SelectLang from '../SelectLang';
import Avatar from './AvatarDropdown';
import styles from './index.less';

export type SiderTheme = 'light' | 'dark';
export interface GlobalHeaderRightProps extends ConnectProps {
  theme?: SiderTheme;
  layout: 'sidemenu' | 'topmenu';
  location: any;
}
const ENVTagColor = {
  dev: 'orange',
  test: 'green',
  pre: '#87d068',
};

const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = props => {
  const { theme, layout, user } = props;
  let className = styles.right;

  if (theme === 'dark' && layout === 'topmenu') {
    className = `${styles.right}  ${styles.dark}`;
  }

  const iscrm = customSettings.appName === 'crm';

  return (
    <>
      {/* 软电话 */}
      {/* {ProjectUtil.enableSoftPhone() && (
        <div className="softPhoneWrap">{user && user.id && <SoftPhone />}</div>
      )} */}

      <div className={className}>
        {/* <HeaderSearch
          className={`${styles.action} ${styles.search}`}
          placeholder={formatMessage({
            id: 'component.globalHeader.search',
          })}
          defaultValue="umi ui"
          dataSource={[
            formatMessage({
              id: 'component.globalHeader.search.example1',
            }),
            formatMessage({
              id: 'component.globalHeader.search.example2',
            }),
            formatMessage({
              id: 'component.globalHeader.search.example3',
            }),
          ]}
          onSearch={() => {}}
          onPressEnter={() => {}}
        /> */}
        {/* <Tooltip
          title={formatMessage({
            id: 'component.globalHeader.help',
          })}
        >
          <a
            target="_blank"
            href="https://pro.ant.design/docs/getting-started"
            rel="noopener noreferrer"
            className={styles.action}
          >
            <Icon type="question-circle-o" />
          </a>
        </Tooltip> */}
        {/* <NoticeIconView /> */}
        <Avatar menu />
        {REACT_APP_ENV && <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>}
        <SelectLang className={styles.action} />
      </div>
    </>
  );
};

export default connect(({ settings, user }: ConnectState) => ({
  theme: settings.navTheme,
  layout: settings.layout,
  user: user.currentUser,
}))(GlobalHeaderRight);
